<template>
	<view>
		<view class="content" v-if="vote">
			<image :src="imgUrl + vote.image" style="width: 100%;height: 180px;border-radius: 15px;" mode="aspectFill"
				v-if="vote.mold < 4"></image>
			<image :src="system.domain+'/assets/addons/kzvote/img/pk.png'" style="width: 100%;height: 180px;border-radius: 15px;" mode="aspectFill"
				v-else-if="vote.mold == 4 && system"></image>
			<view style="line-height: 40px;margin-top: 10px;">
				<u-row justify="space-between" gutter="10">
					<u-col span="9">
						<u-text :text="vote.name" :bold="true" size="18" lines="1"></u-text>
					</u-col>
					<u-col span="3">
						<u-tag text="待审核" type="warning" v-if="vote.check == 0" size="mini"></u-tag>
						<u-tag text="已驳回" type="error" v-else-if="vote.check == 2" size="mini"></u-tag>
						<block v-else>
							<u-tag text="进行中" type="success" v-if="vote.status == 10" size="mini"></u-tag>
							<u-tag text="暂停中" type="warning" v-else-if="vote.status == 20" size="mini"></u-tag>
							<u-tag text="删除" type="error" v-else-if="vote.status == 30" size="mini"></u-tag>
							<u-tag text="未开始" borderColor="#fcbd71" bgColor="#fcbd71" v-else-if="vote.status == 40"
								size="mini"></u-tag>
							<u-tag text="已结束" borderColor="#c8c9cc" bgColor="#c8c9cc" v-else-if="vote.status == 50"
								size="mini"></u-tag>
						</block>
					</u-col>
				</u-row>
				<u-text :text="vote.start_time_text + ' ~ ' + vote.end_time_text"></u-text>
			</view>
		</view>
		<u-gap height="10" bgColor="#f2f2f2"></u-gap>
		<view class="content" v-if="vote">
			<u-grid :border="false" :customStyle="{lineHeight:'35px',padding:'10px 0'}">
				<u-grid-item>
					<text class="active active-count" :class="color+'-color'"></text>
					<u-text :text="'总投票数 '+vote.count || 0" align="center" :color="color_value"></u-text>
				</u-grid-item>
				<u-grid-item>
					<text class="active active-browse" :class="color+'-color'"></text>
					<u-text :text="'总浏览量 '+vote.hit" align="center" :color="color_value"></u-text>
				</u-grid-item>
				<u-grid-item>
					<text class="active active-renshu" :class="color+'-color'"></text>
					<u-text :text="'总选手数 '+vote.person_count" align="center" :color="color_value"></u-text>
				</u-grid-item>
			</u-grid>
		</view>
		<u-gap height="10" bgColor="#f2f2f2"></u-gap>
		<view class="content" v-if="vote">
			<view class="grid">
				<u-grid :border="false">
					<u-grid-item @tap="gosave">
						<text class="active active-upl" :class="color+'-color'"></text>
						<u-text text="编辑" align="center" :color="color_value"></u-text>
					</u-grid-item>

					<block v-if="vote.status<50">
						<u-grid-item v-if="vote.status == 10" @click="status(20)">
							<text class="active active-end" :class="color+'-color'"></text>
							<u-text text="暂停" align="center" :color="color_value"></u-text>
						</u-grid-item>
						<u-grid-item @click="status(10)" v-else>
							<text class="active active-start" :class="color+'-color'"></text>
							<u-text text="开始" align="center" :color="color_value"></u-text>
						</u-grid-item>
						<u-grid-item @click="goto('/pages/group/group?vote_id='+vote_id)"
							v-if="vote.group_status == '1' && vote.mold < 3">
							<text class="active active-fenzu" :class="color+'-color'"></text>
							<u-text text="选手分组" align="center" :color="color_value"></u-text>
						</u-grid-item>
						<u-grid-item @click="goto('/pages/apply/apply?vote_id='+vote_id+'&manage=1')"
							v-if="vote.mold < 3">
							<text class="active active-option" :class="color+'-color'"></text>
							<u-text text="添加选手" align="center" :color="color_value"></u-text>
						</u-grid-item>
						<u-grid-item @click="goto('/pages/check/check?vote_id='+vote_id)" v-if="vote.mold < 3">
							<text class="active active-audit" :class="color+'-color'"></text>
							<u-text text="选手审核" align="center" :color="color_value"></u-text>
						</u-grid-item>
					</block>
					<u-grid-item @click="del()">
						<text class="active active-del" :class="color+'-color'"></text>
						<u-text text="删除" align="center" :color="color_value"></u-text>
					</u-grid-item>
					<u-grid-item @click="show = true">
						<text class="active active-yunxiazai" :class="color+'-color'"></text>
						<u-text text="导出" align="center" :color="color_value"></u-text>
					</u-grid-item>
					<u-grid-item @click="diannaoShow = true" v-if="active && active.computer_manage == 1">
						<text class="active active-diannao1" :class="color+'-color'"></text>
						<u-text text="电脑后台" align="center" :color="color_value"></u-text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-gap height="50" bgColor="#fff"></u-gap>
		<view class="btns" v-if="vote" :style="'border-top:1px solid '+color_value">
			<view class="btn" :class="color+'-bg'" @tap="goindex">主页</view>
			<!-- #ifdef MP-WEIXIN -->
			<navigator class="btn" :class="color+'-color'"
				:url="'/pages/share/share?id='+vote.id+'&name='+vote.name+'&image='+vote.image+'&type=vote&temp_name='+vote.temp_name"
				hover-class="none" v-if="vote.mold < 3">分享</navigator>
			<!-- #endif -->
		</view>

		<u-action-sheet :actions="list" :title="title" :show="show" :closeOnClickOverlay="true"
			:closeOnClickAction="true" @close="show = false" @select="select"></u-action-sheet>

		<u-popup :show="urlshow" mode="center" @close="urlshow=false;url=''" :customStyle="{ width: '80%',margin: '0 auto', borderRadius: '5px' }">
			<view class="url_box">
				<u-text text="点击下方复制按钮后到电脑浏览器打开链接即可下载"></u-text>
				<view style="height: 15px;"></view>
				<u--textarea :value="export_url" :disabled="true"></u--textarea>
				<button @click="copy(export_url)" :class="color+'-bg'">复制并关闭</button>
			</view>
		</u-popup>
		
		<u-popup :show="diannaoShow" round="5" mode="bottom" @close="diannaoShow=false;" v-if="system">
			<view class="url_box">
				<u-text text="后台地址:" lineHeight="40" ></u-text>
				<u-input :value="system.domain+'/kzvote'" :disabled="true"></u-input>
				<block v-if="!store">
					<u-text text="账号:" lineHeight="40" ></u-text>
					<u-input v-model="form.username" placeholder="请输入账号"></u-input>
					<u-text text="密码:" lineHeight="40" ></u-text>
					<u-input v-model="form.password" placeholder="请输入密码"></u-input>
					<button @click="register()" :class="color+'-bg'">注册</button>
				</block>
				<block v-else>
					<u-text text="账号:" lineHeight="40" ></u-text>
					<u-input v-model="store" :disabled="true"></u-input>
					<button @click="copy(system.domain+'/kzvote')" :class="color+'-bg'">复制并关闭</button>
				</block>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				system: 'common/system',
				active: 'common/active',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				user: this.utils.getData('user'),
				vote_id: 0,
				vote: null,
				title: '可导出选手或投票记录',
				list: [{
						name: '投票选手',
						subname: "按编号导出",
						value: 1
					},
					{
						name: '排行榜',
						subname: "按票数导出",
						value: 2
					},
					{
						name: '投票记录',
						subname: "按时间倒序导出",
						value: 3
					}
				],
				show: false,
				export_url: '',
				urlshow: false,
				diannaoShow: false,
				store: '',
				form: {
					username: '',
					password: '',
				},
			};
		},
		onLoad: function(options) {
			this.vote_id = options.id;
			console.log(111)
			console.log(this.active)
			// this.ajax();
		},
		onShow() {
			this.ajax();
			if (getApp().globalData.audio) {
				getApp().globalData.audio.destroy();
				getApp().globalData.audio = null;
			}
		},
		methods: {
			ajax() {
				this.http('user/store', {
					vote_id: this.vote_id
				}, 'get').then(res => {
					this.store = res.data
				});
				this.http('vote/detail', {
					vote_id: this.vote_id
				}, 'get').then(res => {
					var data = res.data;
					if (data.start_time * 1000 > Date.parse(new Date())) {
						data.status = 40;
						data.status_text = '未开始';
					}
					if (data.end_time * 1000 < Date.parse(new Date())) {
						data.status = 50;
						data.status_text = '已结束';
					}
					if (!data.count) {
						data.count = 0;
					}
					this.vote = data;
					// #ifdef MP-WEIXIN
					uni.$u.mpShare = {
						title: this.vote.name,
						path: '/pages/vote/index?id=' + this.vote_id,
						imageUrl: this.imgUrl + this.vote.image
					}
					// #endif
					this.utils.share({
						title: this.vote.name,
						imgUrl: this.imgUrl + this.vote.image
					})
				});
			},
			status(status) {
				this.http('vote/status', {
					vote_id: this.vote_id,
					status: status
				}, 'get').then(res => {
					this.vote.status = status;
				});
			},

			del() {
				uni.showModal({
					title: '提示',
					content: '是否确定删除活动？',
					success: res => {
						if (res.confirm) {
							this.http('vote/status', {
								vote_id: this.vote_id,
								status: 30
							}, 'get').then(res => {
								this.utils.goreto('/pages/active/active');
							});
						}
					}
				});
			},
			goto(url){
				this.utils.goto(url)
			},
			gosave(url) {
				if (this.vote.mold < 3) {
					this.utils.goto('/pages/save/save?vote_id=' + this.vote.id)
				} else if (this.vote.mold == 3) {
					this.utils.goto('/pages/save/text?vote_id=' + this.vote.id)
				} else if (this.vote.mold == 4) {
					this.utils.goto('/pages/save/pk?vote_id=' + this.vote.id)
				}
			},
			goindex() {
				if (this.vote.mold < 3) {
					this.utils.goto('/pages/vote/index?vote_id=' + this.vote.id)
				} else if (this.vote.mold == 3) {
					this.utils.goto('/pages/vote/text?vote_id=' + this.vote.id)
				} else if (this.vote.mold == 4) {
					this.utils.goto('/pages/vote/pk?vote_id=' + this.vote.id)
				}
			},
			select(e) {
				let path = 'person/export';
				let data = {}
				data.vote_id = this.vote_id;
				data.vote_name = this.vote.name;
				if (e.value == 1) {
					data.sort = 'code';
				} else if (e.value == 2) {
					data.sort = 'count';
				} else if (e.value == 3) {
					path = 'log/export';
				}
				this.http(path, data, 'get').then(res => {
					if (res.code) {
						this.export_url = res.data
						this.urlshow = true
					} else {
						uni.$u.toast(res.msg)
					}
				});
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: res=> {
						uni.$u.toast('复制成功')
						this.urlshow = false
						this.diannaoShow = false
						this.export_url = ''
					},
					fail: function(res) {
						uni.$u.toast('复制失败')
					}
				})
			},
			register(){
				if (!this.form.username){
					uni.$u.toast('请输入账号')
					return false
				}
				if (!this.form.password){
					uni.$u.toast('请输入密码')
					return false
				}
				this.http('user/register', this.form, 'post').then(res => {
					uni.$u.toast(res.msg)
					this.store = res.data;
				});
			}
		}
	};
</script>

<style lang="scss">
	.content {
		padding: 0 30rpx;
		background-color: #fff;
	}

	.grid {
		.u-grid {
			line-height: 30px;
			padding-top: 15px;
		}

		.u-grid-item {
			margin-bottom: 20px;
		}
	}

	.btns {
		width: 100%;
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 99;
		display: flex;
	}

	.btn {
		flex: 1;
		height: 60px;
		line-height: 60px;
		text-align: center;
		background-color: #fff;
	}

	.active {
		font-size: 24px;
	}

	.u-tag {
		text-align: center;
		display: inline-block !important;

		text {
			display: block;
			line-height: 20px !important;
		}
	}
	.url_box{
		padding: 25px;
		
		.coty_text{
			display: block;
			padding: 15px 5px;
			background-color: #f2f2f2;
			color: #ccc;
			margin-top: 10px;
		}
		
		button{
			margin-top: 20px;
			font-size: 14px;
		}
	}
</style>
